import React, {Component} from 'react';
import {View, StyleSheet, ImageBackground, Text, Dimensions, TextInput, TouchableOpacity} from "react-native";


const {width,height,scale}  = Dimensions.get('window')
const hrColor = "#E6E6E6"
class Register extends Component {
    constructor(props) {
        super(props);
    }

    register() {

    }

    render() {

        // const { navigation } = this.props
        return (
            <ImageBackground  source={require("../../../public/randomImg/mv.jpg")} style={{flex:1}}>
                <View style={styles.loginContainer}>
                    <View style={styles.body}>
                        <Text style={styles.userText} >邮箱</Text>
                        <TextInput  style={styles.userInput} placeholder={"请输入邮箱"}/>
                        {/*中间的线*/}
                        <View style={styles.hr1}></View>
                        <Text style={styles.mailText} >邮箱验证码</Text>
                        <TextInput  style={styles.mailInput} placeholder={"邮箱验证码"}/>
                        {/*发送按钮*/}
                        <TouchableOpacity style={styles.mailButton} activeOpacity={0.8}>
                            <Text style={styles.mailButtonText}>发送</Text>
                        </TouchableOpacity>
                        <View style={styles.hr2}></View>
                        <Text style={styles.passText} >密码</Text>
                        <TextInput  textContentType={"password"} style={styles.passInput} placeholder={"密码"}/>
                        <View style={styles.hr3}></View>
                        <Text style={styles.confirmText} >密码</Text>
                        <TextInput   style={styles.confirmInput} placeholder={"密码"}/>
                        <View style={styles.hr4}></View>
                        <Text style={styles.inviteText} >邀请码</Text>
                        <TextInput  style={styles.inviteInput} placeholder={"邀请码"}/>
                        <View style={styles.hr5}></View>

                    </View>
                      {/*注册登录按钮*/}
                    <View style={styles.buttonBody}>
                        <TouchableOpacity style={styles.registerButton} activeOpacity={0.8} >
                            <Text style={styles.buttonText}>注册</Text>
                        </TouchableOpacity>
                    </View>

                </View>
             </ImageBackground>
        );
    }
}

export default Register;
const styles = StyleSheet.create({

    loginContainer:{
        flex:1,
        alignItems: "center",
        // backgroundColor:"#E6E6E6",
    },
    body:{
        width:"100%",
        height:171,
        marginTop:"40%",
        backgroundColor:"#F2F2F2",

        // borderWidth:1,
        borderColor:"#f5f6fa",

    },
    title:{
        fontSize:26,
        textAlign:"center",

    },
    describe:{
        fontSize:10,
        textAlign:"center"
    },
    hr1:{
        width:width,
        position:"absolute",
        top: 30,
        left:10,
        borderTopWidth:1,
        opacity:0.8,
        borderColor: hrColor,
    },
    hr2:{
        width:width,
        position:"absolute",
        top: 65,
        left:10,
        borderTopWidth:1,
        opacity:0.8,
        borderColor: hrColor,
    },
    hr3:{
        width:width,
        position:"absolute",
        top: 100,
        left:10,
        borderTopWidth:1,
        opacity:0.8,
        borderColor: hrColor,
    },
    hr4:{
        width:width,
        position:"absolute",
        top: 135,
        left:10,
        borderTopWidth:1,
        opacity:0.8,
        borderColor: hrColor,
    },
    hr5:{
        width:width,
        position:"absolute",
        top: 170,
        left:10,
        borderTopWidth:1,
        opacity:0.8,
        borderColor: hrColor,
    },
    userInput:{
        position:"absolute",
        top: 0,
        left:80,
        width:width-width/scale,
        height: 30,
        // borderWidth: 1,
        padding:0,
        // opacity: 0.5,
        // fontFamily:'webfont'
        // fontFamily:Global.fontFamily

    },
    mailInput:{
        position:"absolute",
        top:35,
        left:80,
        width:width-width/scale,
        height: 30,
        // borderWidth: 1,
        padding:0,
        // fontFamily:'webfont'
        // opacity: 0.5
    },
    mailButton:{
        position:"absolute",
        top:35,
        right:0,
        width:60,
        height: 30,
        borderWidth: 1,
        padding:0,
        backgroundColor:"#000",
        borderRadius:3,
    },
    mailButtonText:{
      textAlign:"center",
      lineHeight: 30,
      color:"#FFF"
    },
    passInput:{
        position:"absolute",
        top:70,
        left:80,
        width:width-width/scale,
        height: 30,
        // borderWidth: 1,
        padding:0,
        // opacity: 0.5
    },
    confirmInput:{
        position:"absolute",
        top:105,
        left:80,
        width:width-width/scale,
        height: 30,
        // borderWidth: 1,
        padding:0,
        // opacity: 0.5
    },
    inviteInput:{
        position:"absolute",
        top:140,
        left:80,
        width:width-width/scale,
        height: 30,
        // borderWidth: 1,
        padding:0,
        // opacity: 0.5
    },
    userText:{
        position:"absolute",
        top:5,
        left:10,
        opacity: 0.5,
        fontSize:12
    },
    mailText:{
        position:"absolute",
        top:40,
        left:10,
        opacity: 0.5,
        fontSize:12
    },
    passText:{
        position:"absolute",
        top:70,
        left:10,
        opacity: 0.5,
        fontSize:12
    },
    confirmText:{
        position:"absolute",
        top:110,
        left:10,
        opacity: 0.5,
        fontSize:12
    },
    inviteText:{
        position:"absolute",
        top:145,
        left:10,
        opacity: 0.5,
        fontSize:12
    },

    buttonBody:{
        width:"90%",
        height:30,
        marginTop: 10,
        // borderWidth: 1,
        // borderColor:"#027AFF",
        alignItems: "center",
        flexDirection:'row',
        justifyContent:"space-around",
    },
    registerButton:{
        width:"60%",
        height:30,
        borderWidth: 1,
        borderColor:"#00A0E9",
    },
    buttonText:{
        textAlign:"center",
        lineHeight:30
    }


})
